<template>
  <div class="demo-pagination-block">
    <el-pagination
      v-model:current-page="currentPage4"
      v-model:page-size="pageSize4"
      :page-sizes="[1,10, 20, 30, 40]"
      :small="small"
      :disabled="disabled"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="shucang"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

  <script>
import { ref, inject, getCurrentInstance,watch } from "vue";
export default {
  name: '',
  setup() {
const This = getCurrentInstance();
const data = inject("data");
watch(data, () => {
  shucang.value = data.value.length;
  const startIndex = (currentPage4.value - 1) * pageSize4.value;
  const endIndex = startIndex + pageSize4.value
  const dataye = data.value.slice(startIndex, endIndex)
  // console.log(startIndex, endIndex)
  This.emit("page-data", dataye);
  // do other things if needed
});
// 总长度
const shucang = ref(data.value.length);
// 当前页
const currentPage4 = ref(1);
// 每页条数
const pageSize4 = ref(10);
const small = ref(false);
const background = ref(true);
const disabled = ref(false);

const handleSizeChange = (val) => {
  if((currentPage4.value - 1) * pageSize4.value > shucang.value){
    currentPage4.value=1
    const startIndex = (currentPage4.value - 1) * pageSize4.value;
  const endIndex = startIndex + pageSize4.value
  const dataye = data.value.slice(startIndex, endIndex)
  // console.log(startIndex, endIndex)
  This.emit("page-data", dataye);
}else{
  const startIndex = (currentPage4.value - 1) * pageSize4.value;
  const endIndex = startIndex + pageSize4.value
  const dataye = data.value.slice(startIndex, endIndex)
  // console.log(startIndex, endIndex)
  This.emit("page-data", dataye);
}
  
};
const handleCurrentChange = (val) => {
  // console.log(shucang.value);

  const startIndex = (currentPage4.value - 1) * pageSize4.value;
  const endIndex = startIndex + pageSize4.value
  const dataye = data.value.slice(startIndex, endIndex)
  // console.log(startIndex, endIndex)
  This.emit("page-data", dataye);
  // console.log(`current page: ${val}`);
};
    return {
      handleSizeChange,
      handleCurrentChange,
      small,
      background,
      disabled,
      pageSize4,
      currentPage4,
      shucang,
      data
    }
  },
//生命周期
created(){
},
//生命周期
mounted(){
},
//注册组件
components:{
},
};
</script>
  
  <style scoped>
.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
</style>
  